<template>
    <!-- 通信功能 -->
    <div class="communication-box">
        <div class="communication-list">
            <el-radio-group v-model="select" @change="changeSelect">
                <el-radio-button label="消息"></el-radio-button>
                <el-radio-button label="通讯录"></el-radio-button>
            </el-radio-group>
            <div class="message" v-show="select == '消息'">
                <p class="add-btn" @click="showGroup">+</p>
                <ul class="connect-ul">
                    <li
                        v-for="(item, index) in connectList"
                        :key="index"
                        :class="active == index ? 'is-active' : ''"
                        @click="changeActive(index, item)"
                    >
                        <img :src="item.img" alt="" />
                        <div class="connect-simple">
                            <h4>
                                <span class="span-name">{{ item.name }}</span
                                ><span class="span-time">{{ item.time }}</span>
                            </h4>
                            <p>{{ item.text }}</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="contacts" v-show="select == '通讯录'">
                <div
                    class="contacts-list"
                    v-for="(item, index) in contactsList"
                    :key="item.prop"
                >
                    <h3>{{ item.prop }}</h3>
                    <ul class="contacts-ul">
                        <li
                            v-for="(ele, num) in item['list']"
                            :key="ele.name"
                            :class="
                                contactActiveProp == index &&
                                contactActiveIndex == num
                                    ? 'is-active'
                                    : ''
                            "
                            @click="changeContact(num, ele)"
                        >
                            <img :src="ele.img" alt="" />
                            <span>{{ ele.name }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 聊天框 -->
        <div class="communication-msg" v-show="showRight == 'msg'">
            <div class="close-icon"><i class="icon el-icon-close" title="关闭" @click="closeCommunication"></i></div>
            <div v-show="activeName">
                <div class="msg-header">
                    <h3>{{ activeName }}</h3>
                    <!-- <div>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div> -->
                </div>
                <div class="msg-chat">
                    <ChatList
                        :chatInfoList="chatInfoList"
                        @loading-more="loadingMoreMsg"
                        :nomoreHistory="nomoreHistory"
                        :scrollToHeight="scrollToHeight"
                    ></ChatList>

                    <div class="chat-enter">
                        <div class="enter-icon">
                            <input
                                type="file"
                                id="send-img"
                                class="input-file"
                                accept="image/*"
                                @change="getPicture($event)"
                            />
                            <i
                                class="icon iconfont"
                                title="选择图片"
                                @click="clickSendImg"
                                >&#xe7c6;</i
                            >
                            <i
                                class="icon iconfont"
                                title="选择文件"
                                @click="clickSendFile"
                                >&#xe7c5;</i
                            >
                            <input
                                type="file"
                                id="send-file"
                                class="input-file"
                                accept="file/*"
                                @change="getFile($event)"
                            />
                        </div>
                        <!-- div 设置 contenteditable 可编辑 -->
                        <div class="enter-input">
                            <el-input
                                type="textarea"
                                placeholder="请输入..."
                                v-model="inputMsg"
                                resize="none"
                                @keyup.enter.native="sendMsg"
                            >
                            </el-input>
                            <div class="send-btn">
                                <!-- <el-tooltip
                                class="item"
                                effect="light"
                                content="按 ctrl + enter 可快捷发送"
                                placement="bottom"
                            > -->
                                <el-button
                                    type="primary"
                                    @click="sendMsg"
                                    title="按 enter 可快捷发送"
                                    size="mini"
                                    >发送</el-button
                                >
                                <!-- </el-tooltip> -->
                                <p
                                    v-show="blankPrompt"
                                    class="no-message-title"
                                >
                                    不能发送空白信息
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 通信录详情 -->
        <div class="communication-connect" v-show="showRight == 'connect'">
            <div class="close-icon"><i class="icon el-icon-close" title="关闭" @click="closeCommunication"></i></div>
            <div class="person-info" v-show="activeConnectName">
                <div class="info-top">
                    <h3>
                        <span>{{ activeConnectName }}</span>
                        <i class="icon iconfont">&#xe784;</i>
                        <p>某某某某某公安局</p>
                    </h3>
                    <img src="@/assets/image/my.png" alt="" />
                </div>
                <div class="info-list">
                    <ul>
                        <li v-for="item in personalInfoList" :key="item.label">
                            <span class="span-label">{{ item.label }}</span>
                            <span class="span-value">{{ item.value }}</span>
                        </li>
                    </ul>
                </div>
                <p class="send-connect-btn" @click="sendPersonMsg">发送消息</p>
            </div>
        </div>

        <!-- 发起群聊 -->
        <Dialog
            dialogTitle=""
            :dialogVisible="groupDialog"
            dialogWidth="78.75rem"
            @close-dialog="closeDialog"
        >
            <div class="group-chat">
                <div class="group-chat-left">
                    <el-input
                        placeholder="搜索"
                        prefix-icon="el-icon-search"
                        v-model="connetcName"
                        class="group-connect-search"
                    >
                    </el-input>
                    <div class="group-connect-list">
                        <el-checkbox-group
                            class="group-connect"
                            v-model="handleGroupList"
                            @change="handleSelectGroup"
                        >
                            <div
                                class="group-connect-box"
                                v-for="(item, index) in contactsList"
                                :key="index"
                            >
                                <h4>{{ item.prop }}</h4>
                                <el-checkbox
                                    v-for="(ele, num) in item.list"
                                    :key="num"
                                    :label="ele.name"
                                >
                                    <img :src="ele.img" alt="" />
                                    <span class="span-connect">{{
                                        ele.name
                                    }}</span>
                                </el-checkbox>
                            </div>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="group-chat-right">
                    <div class="right-title">
                        <h3>发起群聊</h3>
                        <p>已选择{{ handleGroupList.length }}个联系人</p>
                    </div>
                    <div class="right-connent-list">
                        <el-badge
                            value="x"
                            class="item"
                            v-for="tag in connentTags"
                            :key="tag.name"
                            type="info"
                            @click.native="removeGruop(tag)"
                        >
                            <img :src="tag.img" alt="" />
                            <p>{{ tag.name }}</p>
                        </el-badge>
                    </div>
                    <div class="right-button">
                        <span class="span-cancel" @click="cancelBtn">取消</span>
                        <span class="span-create" @click="createGroupBtn"
                            >创建</span
                        >
                    </div>
                </div>
            </div>
        </Dialog>
    </div>
</template>

<script>
// import axios from 'axios';

import ChatList from '@/components/ChatList';
import Dialog from '@/components/Dialog';

const myPng = require('@/assets/image/my.png');

export default {
    name: 'Communication',
    components: {
        ChatList,
        Dialog
    },
    data() {
        return {
            // list: [],
            // 联系人查询
            query: {
                pageSize: 10,
                pageNum: 1,
                username: ''
            },
            // 历史消息查询
            historyQuery: {
                sendId: JSON.parse(window.sessionStorage.getItem('userId')),
                receiverId: '',
                sendTime: this.$timeFormate(new Date()),
                pageSize: 10,
                pageNum: 1
            },
            websock: null,
            inputMsg: '',
            blankPrompt: false,
            tool: {},
            select: '通讯录',
            // 右边显示模块  msg 表示聊天框  connect 表示通讯录  默认显示聊天框
            showRight: 'connect',
            connectList: [
                // {
                //     img: myPng,
                //     name: '张三',
                //     time: '09:29',
                //     text: '今天的文档已经发给您了，请您注意查收！',
                //     userId: 1
                // }
            ],
            // 最后一条消息
            lastMessage: {},
            // 没有更多历史消息
            nomoreHistory: false,
            // 点击了发送按钮   滚动到聊天框底部
            scrollToHeight: false,
            active: 0,
            activeName: '',
            // 选中的联系人id
            activeUserId: null,
            contactsList: [
                { prop: 'A', list: [{ img: myPng, name: 'AA' }] },
                {
                    prop: 'B',
                    list: [
                        { img: myPng, name: '白白' },
                        { img: myPng, name: '白离' },
                        { img: myPng, name: '百里' }
                    ]
                },
                {
                    prop: 'D',
                    list: [
                        { img: myPng, name: '大雄' },
                        { img: myPng, name: '大鹅' }
                    ]
                },
                {
                    prop: 'H',
                    list: [
                        { img: myPng, name: '华强' },
                        { img: myPng, name: '华仔' }
                    ]
                }
            ],
            // 测试接口联系人列表
            testContactList: [],
            // 选中的联系人 前字母 索引
            contactActiveProp: null,
            // 选中的联系人的 当前字母下的 索引
            contactActiveIndex: null,
            chatInfoList: [],
            groupDialog: false,
            // 联系人姓名
            connetcName: '',
            // 群聊勾选的联系人
            handleGroupList: [],
            // 群聊已勾选的联系人
            connentTags: [],
            // 选中的通讯录里面的联系人姓名
            activeConnectName: '',
            // 通讯录当前联系人的身份信息
            personalInfoList: [
                { label: '备注名', value: '强哥' },
                { label: '部门', value: '某某部门' },
                { label: '职位', value: '某某职位' },
                { label: '直属主管', value: '李四' },
                { label: '工号', value: '0013457879347393' }
            ]
        };
    },
    created() {
        // this.chatInfoList[0].timestamp =
        //     this.getNowHours + ':' + this.getNowMinutes;
        // this.activeName = this.connectList[0].name;

        // this.getConnect();
    },
    mounted() {
        // this.initWebsock();
    },
    computed: {
        getNowHours: () => {
            return new Date().getHours() > 9
                ? new Date().getHours()
                : '0' + new Date().getHours();
        },
        getNowMinutes: () => {
            return new Date().getMinutes() > 9
                ? new Date().getMinutes()
                : '0' + new Date().getMinutes();
        }
    },
    destroyed() {
        // 销毁监听
        // this.websock.onclose = this.websockClose;
    },
    methods: {
        bindEnter() {},
        // 获取联系人列表   调试
        getConnect() {
            this.$http.getContactList(this.query).then(res => {
                if (res.data.flag == 1) {
                    res.data.data.list.forEach(item => {
                        let obj = {};
                        obj.list = [];
                        let objList = {};
                        if (
                            item.username ==
                            window.sessionStorage.getItem('userName')
                        ) {
                            return false;
                        }
                        obj.prop = item.username.slice(0, 1);
                        objList.img = myPng;
                        objList.name = item.username;
                        objList.userId = item.userId;
                        obj.list.push(objList);
                        this.testContactList.push(obj);
                    });
                }
            });
        },
        // 初始化websock
        initWebsock() {
            let theUserId = JSON.parse(window.sessionStorage.getItem('userId'));
            let url = `ws://192.168.8.150:10009/websocket/${theUserId}`;
            this.websock = new WebSocket(url);
            this.websock.onopen = this.websockOpen;
            this.websock.onerror = this.websockError;
            this.websock.onmessage = this.getMessage;
        },
        // 监听websock连接
        websockOpen() {
            console.log('监听打开');
        },
        // 监听websock错误信息
        websockError() {
            console.log('监听异常');
        },
        // 监听websock消息
        getMessage(msg) {
            let receivedObj = JSON.parse(msg.data);
            // console.log(receivedObj);
            // messageType  1 代表上线   2 代表下线  3 代表在线名单  4 代表普通消息
            switch (receivedObj.messageType) {
                case 1:
                    // eslint-disable-next-line no-case-declarations
                    let onlineName = receivedObj.userId;
                    // console.log(onlineName);
                    break;
                case 2:
                    break;
                case 3:
                    // eslint-disable-next-line no-case-declarations
                    let online = receivedObj.onlineUsers;
                    break;
                case 4:
                    // 收到消息
                    // eslint-disable-next-line no-case-declarations
                    if (this.activeUserId) {
                        let obj = {
                            about: 1,
                            message: receivedObj.content,
                            messageType: 'text',
                            timestamp:
                                (new Date().getHours() > 9
                                    ? new Date().getHours()
                                    : '0' + new Date().getHours()) +
                                ':' +
                                (new Date().getMinutes() > 9
                                    ? new Date().getMinutes()
                                    : '0' + new Date().getMinutes())
                        };
                        this.chatInfoList.push(obj);
                        this.scrollToHeight = true;
                        this.connectList.forEach(item => {
                            if (item.userId == receivedObj.sendId) {
                                item.text = obj.message;
                                item.time = obj.timestamp;
                            }
                        });
                    }
                    break;
            }
        },
        // 关闭websock
        websockClose() {
            console.log('监听关闭');
        },
        // 获取单人聊天历史消息
        async getHistoryMessage() {
            await this.$http
                .getChatMessageHistory(this.historyQuery)
                .then(res => {
                    if (res.data.flag == 1) {
                        let arr = [];
                        res.data.data.list.forEach(item => {
                            let obj = {
                                about: 1,
                                message: item.content,
                                messageType: 'text',
                                timestamp: item.sendTime
                            };
                            if (
                                item.sendId ==
                                window.sessionStorage.getItem('userId')
                            ) {
                                obj.about = 0;
                            }
                            arr.push(obj);
                        });
                        if (this.historyQuery.pageNum == 1) {
                            this.lastMessage = arr[0] || {};
                        }
                        arr.reverse();
                        this.chatInfoList.unshift(...arr);
                        if (res.data.data.list.length == 0) {
                            this.nomoreHistory = true;
                        }
                    }
                });
        },
        changeSelect(val) {
            if (val == '消息') {
                this.showRight = 'msg';
            } else if (val == '通讯录') {
                this.showRight = 'connect';
            }
        },
        // 点击加号按钮  发起群聊
        showGroup() {
            this.groupDialog = true;
        },
        // 更改当前选中的消息
        changeActive(index, item) {
            this.active = index;
            this.activeName = item.name;
            this.activeUserId = item.userId;
            this.historyQuery.receiverId = item.userId;
            this.getHistoryMessage();
        },
        // 选择联系人
        changeContact(num, ele) {
            this.contactActive = num;
            this.activeConnectName = ele.name;
            this.activeUserId = ele.userId;
            this.historyQuery.receiverId = ele.userId;
            this.contactsList.forEach((item, index) => {
                item.list.forEach((list, i) => {
                    if (ele.name == list.name) {
                        this.contactActiveProp = index;
                        this.contactActiveIndex = i;
                    }
                });
            });
            // this.testContactList.forEach((item, index) => {
            //     item.list.forEach((list, i) => {
            //         if (ele.name == list.name) {
            //             this.contactActiveProp = index;
            //             this.contactActiveIndex = i;
            //         }
            //     });
            // });
        },
        // 发送消息
        sendMsg() {
            if (!this.inputMsg.trim()) {
                this.blankPrompt = true;
                setTimeout(() => {
                    this.blankPrompt = false;
                }, 2500);
                return false;
            }
            let sendMessage = {
                content: this.inputMsg,
                sendId: JSON.parse(window.sessionStorage.getItem('userId')),
                receiverId: this.activeUserId
            };
            // this.websock.send(JSON.stringify(sendMessage));
            let obj = {
                about: 0,
                message: this.inputMsg,
                messageType: 'text',
                timestamp:
                    (new Date().getHours() > 9
                        ? new Date().getHours()
                        : '0' + new Date().getHours()) +
                    ':' +
                    (new Date().getMinutes() > 9
                        ? new Date().getMinutes()
                        : '0' + new Date().getMinutes())
            };

            this.chatInfoList.push(obj);
            this.inputMsg = '';
            this.scrollToHeight = true;
            this.connectList.forEach(item => {
                if (item.userId == this.activeUserId) {
                    item.text = obj.message;
                    item.time = obj.timestamp;
                }
            });
        },
        // 点击加载更多历史消息
        loadingMoreMsg() {
            this.historyQuery.pageNum += 1;
            this.scrollToHeight = false;
            // this.getHistoryMessage();
        },
        // 发送图片
        getPicture(e) {
            let imgSrc = window.URL.createObjectURL(e.target.files[0]);

            // 将图片文件转化成 base64 格式图片
            let reader = new FileReader();
            reader.onload = e => {
                // e.target.result  就是从本地读取的图片的 base64 格式，将它上传给服务器即可   post方法即可上传
            };
            reader.readAsDataURL(e.target.files[0]);
        },
        clickSendImg() {
            let imgDom = document.getElementById('send-img');
            imgDom.click();
        },
        // 发送文件
        getFile(e) {},
        clickSendFile() {
            let fileDom = document.getElementById('send-file');
            fileDom.click();
        },
        closeDialog() {
            this.groupDialog = false;
        },
        // 群聊勾选联系人
        handleSelectGroup(val) {
            // console.log(val);
            let arr = [];
            this.contactsList.forEach(item => {
                item.list.forEach(ele => {
                    val.forEach(i => {
                        if (i == ele.name) {
                            arr.push(ele);
                        }
                    });
                });
            });
            this.connentTags = arr;
        },
        // 去掉选中的群聊联系人
        removeGruop(tag) {
            this.connentTags.forEach((item, index) => {
                if (tag.name == item.name) {
                    this.connentTags.splice(index, 1);
                }
            });
            this.handleGroupList.forEach((item, i) => {
                if (tag.name == item) {
                    this.handleGroupList.splice(i, 1);
                }
            });
        },
        cancelBtn() {
            this.groupDialog = false;
            this.connentTags = [];
            this.handleGroupList = [];
        },
        // 创建群聊按钮
        createGroupBtn() {
            this.groupDialog = false;
        },
        // 选中联系人的发送消息按钮
        async sendPersonMsg() {
            this.scrollToHeight = true;
            // 获取历史消息
            // await this.getHistoryMessage();
            // 切换到聊天框  并选中选择的联系人
            for (let i = 0; i < this.connectList.length; i++) {
                if (this.connectList[i].name == this.activeConnectName) {
                    this.active = i;
                    this.activeName = this.connectList[i].name;
                    this.select = '消息';
                    this.showRight = 'msg';
                    return false;
                }
            }
            this.connectList.unshift({
                img: myPng,
                name: this.activeConnectName,
                time: this.lastMessage.timestamp,
                text: this.lastMessage.message,
                userId: this.activeUserId
            });
            this.activeName = this.activeConnectName;
            this.active = 0;
            this.select = '消息';
            this.showRight = 'msg';
        },
        // 点击关闭按钮
        closeCommunication() {
            this.$emit('close-communication');
        }
    }
};
</script>

<style lang="less" scoped>
.communication {
    &-box {
        display: flex;
        box-sizing: border-box;
        background-color: #fff;
        width: 100%;
        height: calc(100% - 2rem);

        img {
            width: 3.87rem;
            height: 3.87rem;
        }

        ::v-deep .avue-chat {
            margin-top: 2.2rem;
        }

        .add-btn {
            font-size: 1.83rem;
            width: 3rem;
            height: 3rem;
            background: #eeeeee;
            border-radius: 0.33rem;
            text-align: center;
            line-height: 3rem;
            font-weight: normal;
            margin-top: 1.75rem;
            margin-bottom: 1.42rem;
            margin-left: 0.5rem;
            cursor: pointer;
        }

        .is-active {
            background-color: #f0f0f0;
        }

        ::v-deep .el-radio-group {
            padding-left: 0.5rem;
            .el-radio-button__inner {
                padding: 0.67rem 4.7rem;
                font-size: 1.17rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                line-height: 1.67rem;
            }
        }

        ::v-deep .el-dialog {
            box-sizing: border-box;
            margin-top: 5vh !important;
            .el-dialog__header {
                padding: 0;
                .el-dialog__headerbtn {
                    display: none;
                }
            }
            .el-dialog__body {
                padding: 0;
            }
            .group-chat {
                display: flex;
                height: 58.49rem;
                border-radius: 1.17rem;
                overflow: hidden;
                &-left {
                    width: 36.42rem;
                    background-color: #f0f0f0;
                    box-sizing: border-box;
                    overflow-y: auto;
                    position: relative;
                    .group-connect {
                        &-search {
                            position: fixed;
                            z-index: 8;
                            padding: 2.75rem 3.25rem;
                            width: 29.83rem;
                            background-color: #f0f0f0;
                            .el-input__inner {
                                width: 29.83rem;
                            }
                            .el-input__prefix {
                                left: 3.55rem;
                                top: 2px;
                            }
                        }

                        &-list {
                            margin-top: 5.75rem;
                            padding: 2.75rem 3.25rem;
                        }

                        &-box {
                            h4 {
                                height: 1.67rem;
                                font-size: 1.17rem;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #999999;
                                line-height: 1.67rem;
                                margin: 1.75rem 0;
                            }
                            img {
                                width: 3.87rem;
                                height: 3.87rem;
                                border-radius: 0.5rem;
                                margin-right: 1.25rem;
                            }
                            .span-connect {
                                font-size: 1.17rem;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #333333;
                            }
                            .el-checkbox {
                                display: flex;
                                align-items: center;
                                margin-bottom: 1.83rem;
                                .el-checkbox__label {
                                    display: flex;
                                    align-items: center;
                                }
                                .el-checkbox__inner {
                                    width: 1.67rem;
                                    height: 1.67rem;
                                    border-radius: 50%;
                                    &::after {
                                        left: 7px;
                                        top: 4px;
                                    }
                                }
                            }
                        }
                    }
                }
                &-right {
                    flex: 1;
                    position: relative;
                    .right-title {
                        display: flex;
                        padding: 2.33rem 4rem 1.92rem 3.33rem;
                        justify-content: space-between;
                        align-items: center;
                        h3 {
                            font-size: 1.67rem;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            color: #333333;
                        }
                        p {
                            font-size: 1.33rem;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                        }
                    }

                    .right-connent-list {
                        padding: 0 3.42rem;
                        .el-badge {
                            margin-right: 3.42rem;
                            &:nth-child(5n) {
                                margin-right: 0;
                            }
                        }
                        .el-badge__content {
                            line-height: 1.333333rem;
                            background-color: #ccc;
                            cursor: pointer;
                        }
                        p {
                            text-align: center;
                        }
                    }

                    .right-button {
                        position: absolute;
                        display: flex;
                        bottom: 3.75rem;
                        left: 50%;
                        transform: translateX(-50%);
                        span {
                            width: 13.83rem;
                            height: 3.83rem;
                            background: #f0f0f0;
                            border-radius: 0.5rem;
                            font-size: 2rem;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            color: #2364d9;
                            line-height: 3.83rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .span-create {
                            background-color: #2364d9;
                            color: #fff;
                            margin-left: 2.17rem;
                        }
                    }
                }
            }
        }

        .close-icon {
            position: absolute;
            top: 1.1rem;
            right: 1.2rem;
            cursor: pointer;
        }
    }

    &-list {
        width: 28.33rem;
        padding: 1.33rem 0.58rem;
        border-right: 0.08rem solid #ddd;
        overflow-y: auto;
        .contacts {
            padding-top: 1rem;
        }
        .connect-ul,
        .contacts-ul {
            li {
                display: flex;
                padding: 0.75rem 0.67rem;
                box-sizing: border-box;
                cursor: pointer;
                img {
                    width: 3.87rem;
                    height: 3.87rem;
                    border-radius: 0.5rem;
                    margin-right: 1rem;
                }
                .connect-simple {
                    width: 100%;
                    h4 {
                        font-size: 1.17rem;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 1.67rem;
                        margin-bottom: 0.67rem;
                        display: flex;
                        justify-content: space-between;
                        .span-time {
                            color: #999999;
                        }
                    }
                    p {
                        font-size: 1.17rem;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        line-height: 1.67rem;
                    }
                }
            }
        }

        .contacts-list {
            h3 {
                font-size: 1.17rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 1.67rem;
                padding: 1.67rem 0 0.25rem 1.08rem;
                border-bottom: 0.08rem solid #ddd;
                margin-bottom: 1.67rem;
            }
            .contacts-ul {
                li {
                    span {
                        line-height: 3.87rem;
                    }
                }
            }
        }
    }

    &-msg {
        flex: 1;
        position: relative;
        .msg {
            &-header {
                height: 4.17rem;
                border-bottom: 0.08rem solid #ddd;
                padding: 0 2.42rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                h3 {
                    font-size: 1.5rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 4.17rem;
                }
                div {
                    display: flex;
                    cursor: pointer;
                    align-items: center;
                    width: 2rem;
                    height: 2rem;
                    span {
                        width: 0.33rem;
                        height: 0.33rem;
                        border-radius: 50%;
                        background-color: #000;
                        margin-right: 0.17rem;
                    }
                }
            }

            &-chat {
                display: flex;
                flex-direction: column;
                height: calc(58rem - 4.4rem);
                .chat {
                    &-enter {
                        height: 14rem;
                        border-top: 0.08rem solid #ddd;
                        .enter-icon {
                            padding-top: 0.58rem;
                            padding-left: 2.42rem;
                            margin-bottom: 0.13rem;
                            .icon {
                                font-size: 2rem;
                                margin-right: 2.58rem;
                                cursor: pointer;
                            }
                        }
                        .enter-input {
                            padding-right: 1.25rem;
                            ::v-deep .el-textarea {
                                height: 7.8rem;
                                .el-textarea__inner {
                                    height: 100% !important;
                                    border: none;
                                }
                            }
                            .send-btn {
                                text-align: right;
                                position: relative;
                                .no-message-title {
                                    position: absolute;
                                    top: -3.5rem;
                                    right: -1rem;
                                    color: #000;
                                    font-size: 1rem;
                                    border-radius: 0.24rem;
                                    padding: 0.5rem 0.4rem;
                                    border: 0.08rem solid #000;
                                    &::before {
                                        content: '';
                                        position: absolute;
                                        width: 0.8rem;
                                        height: 0.8rem;
                                        background-color: #fff;
                                        right: 1.5rem;
                                        bottom: -0.5rem;
                                        transform: rotate(45deg);
                                        border: 0.08rem solid transparent;
                                        border-right-color: #000;
                                        border-bottom-color: #000;
                                    }
                                }
                            }
                        }
                        .input-file {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    &-connect {
        flex: 1;
        position: relative;
        .person-info {
            padding: 4.08rem 0 0 12.58rem;
            width: 32.83rem;
            .info-top {
                display: flex;
                justify-content: space-between;
                h3 {
                    font-size: 2.5rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 3.5rem;
                    p {
                        font-size: 1.33rem;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2364d9;
                        line-height: 1.83rem;
                        margin-top: 1.92rem;
                        margin-bottom: 2.23rem;
                    }
                    .icon {
                        font-size: 1.22rem;
                        color: #ffa200;
                        vertical-align: middle;
                    }
                }
                img {
                    width: 6.5rem;
                    height: 6.5rem;
                    border-radius: 0.5rem;
                }
            }
            .info-list {
                padding-top: 1.83rem;
                padding-bottom: 2.23rem;
                box-sizing: border-box;
                border-top: 0.08rem solid #dddddd;
                border-bottom: 0.08rem solid #dddddd;
                ul {
                    li {
                        margin-bottom: 0.75rem;
                        &:last-child {
                            margin-bottom: 0;
                        }
                        span {
                            font-size: 1.17rem;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            line-height: 1.67rem;
                            display: inline-block;
                        }
                        .span-label {
                            color: #999999;
                            width: 7.67rem;
                        }
                    }
                }
            }
            .send-connect-btn {
                margin: 10.42rem auto 0;
                width: 11.5rem;
                height: 3rem;
                line-height: 3rem;
                background: #2364d9;
                border-radius: 0.33rem;
                border: 0.08rem solid rgba(0, 0, 0, 0);
                font-size: 1.17rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                text-align: center;
                cursor: pointer;
            }
        }
    }
}
</style>

